<template>
  <div>
    <CategorySelector></CategorySelector>
    <SpuList
      @setShowStatus="changeStatus"
      @getSpuInfo="saveSpuInfo"
      v-if="showStatus === ShowStatus.SPU_LIST"
    ></SpuList>
    <SpuForm
      @setShowStatus="changeStatus"
      :currentSpuInfo="currentSpuInfo"
      v-if="showStatus === ShowStatus.SPU_FORM"
    ></SpuForm>
    <SkuForm
      @setShowStatus="changeStatus"
      :currentSpuInfo="currentSpuInfo"
      v-if="showStatus === ShowStatus.SKU_FORM"
    ></SkuForm>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Spu',
};
</script>
<script lang="ts" setup>
import { ref } from 'vue';
import CategorySelector from '@/components/CategorySelector/index.vue';
import SpuList from './components/SpuList.vue';
import SpuForm from './components/SpuForm.vue';
import SkuForm from './components/SkuForm.vue';
import { ShowStatus } from './types';

const showStatus = ref(ShowStatus.SPU_LIST);
const currentSpuInfo = ref({});
// 1. 实现组件间的切换
const changeStatus = (status) => {
  // console.log('ss', status);
  showStatus.value = status;
};

// 2. 接收待编辑的数据 当前相当于是一个中转站
const saveSpuInfo = (spuInfo) => {
  currentSpuInfo.value = {
    ...spuInfo,
    // 为了避免单击编辑按钮跳转到SpuForm.vue页面报错,这个地方需要添加两个属性
    spuImageList: [],
    spuSaleAttrList: [],
  };
};
</script>

<style></style>
